<template>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="visible"
      :before-close="cancel"
      class="JNPF-dialog JNPF-dialog_center"
      lock-scroll
      width="65%"
    >
      <el-row :gutter="15" class="">
        <el-form
          ref="elForm"
          :model="dataForm"
          :rules="rules"
          label-width="135px"
        >

        <el-col :span="12">
            <el-form-item  label="供应商编号" prop="FCATNO">
                <el-input v-model="dataForm.FCATNO" />
            </el-form-item>
        </el-col>

        <el-col :span="12">
            <el-form-item label="状态">
              <el-select v-model="dataForm.FSTATE" placeholder="请选择">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item  label="供应商名称" prop="FCATNAME">
                <el-input v-model="dataForm.FCATNAME" />
            </el-form-item>
         </el-col>

          <el-col :span="12">
            <el-form-item class="required" label="联系人" prop="FLINKNAME">
              <el-input
                v-model="dataForm.FLINKNAME"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item  label="职务" prop="FWORKLEVEL">
                <el-input v-model="dataForm.FWORKLEVEL" />
            </el-form-item>
         </el-col>

          <el-col :span="12">
            <el-form-item class="required" label="手机号码" prop="FMOILE">
              <el-input
                v-model="dataForm.FMOILE"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item class="required" label="电话号码" prop="FTELNO">
              <el-input
                v-model="dataForm.FTELNO"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item class="required" label="邮箱地址" prop="FEMAIL">
              <el-input
                v-model="dataForm.FEMAIL"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item  label="财务税号" prop="FACCNO">
                <el-input v-model="dataForm.FACCNO" />
            </el-form-item>
         </el-col>

          <el-col :span="24">
            <el-form-item label="联系地址">
              <el-input
                v-model="dataForm.FADDRESS"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>

        <el-col :span="12">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>


        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button  v-if="insertorupdate" type="primary" v-loading="loading">确 定</el-button>
        <el-button v-else type="primary"  v-loading="loading">修 改</el-button>
      </span>
    </el-dialog>
  </template>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

  <script>
  import jnpf from "@/utils/jnpf"
  export default {
    props: {
      parelist: {
        type: Array,
        default: []
      },
    },
    data() {
      return {
          imageUrl1:require('@/assets/images/me/supplier1.png'),
          imageUrl2:require('@/assets/images/me/supplier2.png'),

          title:"新增",
          dataForm:{
            FCATNO: "101",
            FCATNAME: "广州福兴实验室设备科技",
            FLINKNAME: "王义夫",
            FMOILE:"13819903874",
            FTELNO:"",
            FEMAIL:"283040596@qq.com",
            FADDRESS: "广东广州校园路1号",
            FSTATE: "正常"
          },
          rules: {
            FCATNO: [
                  { required: true, message: '请输入供应商编号', trigger: 'blur' },
              ],
              FCATNAME: [
                  { required: true, message: '请输入供应商名称', trigger: 'blur' },
              ],
          },

        //所属校区选择数据
        options1: [{
          value: '1',
          label: '正常'
        }, {
          value: '2',
          label: '停用'
        }],
        loading:false,
        visible:false,
        insertorupdate:true
      };
    },
    created() {
    },
    mounted() {},
    methods: {
      //
      init(id){
        this.dataForm.FCATNO= id || ''
          if(this.dataForm.FCATNO)
          {
              this.title="修改"
             this.insertorupdate=false;
          }
          else
          {
            this.insertorupdate=true;
              this.title="新增";
          }
          this.visible=true;
      },
      //
      cancel(){
          this.$refs.elForm.resetFields();
          this.visible=false;
      },

      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

    },
  };
  </script>
  
  
  
  
  